<template>
  <view class="coupon-item" v-if="couponItem">
    <view class="left" :class="titleId === 3 || titleId === 4 ? 'bg_2' : ''">
      <view class="content">
        <text ref="priceContent" class="PRICE" v-if="couponItem.couponType == 'PRICE'">
          {{ couponItem.price }}
        </text>
        <text class="DISCOUNT" v-if="couponItem.couponType == 'DISCOUNT'">
          {{ calculate(couponItem.couponDiscount) }}
        </text>
        <text>满{{ couponItem.consumeThreshold }}使用</text>
      </view>
      <view class="bg-circle bg-top"> </view>
      <view class="bg-circle bg-bottom"> </view>
    </view>

    <view class="right" :style="titleId === 3 || titleId === 4 ? 'background: #E3E3E3;' : ''">
      <view class="promotionName">
        {{ couponItem.promotionName }}
      </view>
      <view class="active-time">
        {{ calculateTime(couponItem.startTime) }} -
        {{ calculateTime(couponItem.endTime) }}
      </view>
      <!-- <view class="preferential-price">
        <text v-if="couponItem.couponType == 'DISCOUNT' && couponItem.price">最高可优惠
          {{ couponItem.price }} 元</text>
        <text
          v-if="couponItem.couponType == 'DISCOUNT' && !couponItem.price">满{{ couponItem.consumeThreshold }}使用</text>
        <text v-if="couponItem.couponType == 'PRICE'">满{{ couponItem.consumeThreshold }}使用</text>
      </view> -->
      <view class="">
        <text>{{ couponItem.description || '除活动商品及特价商品外' }}</text>
      </view>

      <view v-if="titleId !== 4 && !settlement" @click="clickCoupon(couponItem)"
        :class="[btnStyle(couponItem), 'btn-status']">
        <!-- 点击领取  去使用 -->
        <text>{{ clickBtn(couponItem) }}</text>
      </view>
      <view v-else class="overdue">
        <image :src="staticUrl() + '/personalCenter/couponGuoqi.png'" v-if="titleId === 4"></image>
      </view>
      <!-- 结算页选择框 -->
      <view v-if="settlement" class="">
        <slot name="settlementCheck"></slot>
      </view>
    </view>
  </view>
</template>

<script>
import { calculate, calculateTime } from '@/utils/util.js'
export default {
  props: {
    couponItem: {
      type: Object,
      default: () => {
        return {}
      }
    },
    titleId: {
      type: Number,
      default: () => {
        return 1
      }
    },
    //是否结算页
    settlement: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {}
  },

  methods: {
    calculate,
    calculateTime,

    clickBtn (val) {
      if (!val.memberCouponStatus) {
        return val.obtainedNum ? `已领取${val.obtainedNum}张` : '领取'
      }
      if (val.memberCouponStatus === 'NEW') {
        return '点击使用'
      }
      if (val.memberCouponStatus === 'USED') {
        return '已使用'
      }
      if (val.memberCouponStatus === 'EXPIRE') {
        return '已过期'
      }
    },
    clickCoupon () {
      this.$emit('clickCoupon', {
        data: this.couponItem
      })
    },
    btnStyle (item) {
      if ([1, 2].includes(this.titleId)) {
        if (item.obtainedNum === item.couponLimitNum && this.titleId === 1) {
          return 'gray'
        } else {
          return 'defa'
        }
      } else if (this.titleId === 3) {
        return 'used'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.coupon-item {
  position: relative;
  height: 159.67rpx;
  background: #fff;
  margin: 0 25rpx;
  margin-bottom: 22rpx;
  display: flex;

  .left {
    position: relative;
    background: linear-gradient(-90deg, #2265fc, #41a5fa);
    border-radius: 26rpx 0 0 26rpx;
    width: 226rpx;
    height: 159.67rpx;

    .content {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;

      text {
        color: #fff;
        line-height: 1;
      }

      text:nth-child(1) {
        font-size: 56rpx;
        position: relative;
      }

      text:nth-child(2) {
        font-size: 26rpx;
        margin-top: 6rpx;
        color: rgba($color: #fff, $alpha: 0.8);
      }

      .PRICE::before {
        content: "￥";
        font-size: 30rpx;
        position: absolute;
        top: 24rpx;
        left: -30rpx;
      }

      .DISCOUNT::after {
        content: "折";
        font-size: 26rpx;
        margin-left: 6rpx;
        position: absolute;
        top: 24rpx;
        right: -30rpx;
      }
    }

    .bg-circle {
      position: absolute;
      right: 0;
      border-radius: 50%;
      background: #f9f9f9;
      width: 20rpx;
      height: 20rpx;
    }

    .bg-top {
      top: 0;
      transform: translate(50%, -50%);
    }

    .bg-bottom {
      bottom: 0 !important;
      transform: translate(50%, 50%);
    }
  }

  .bg_2 {
    background: #c9c9c9;
  }

  .right {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    padding: 28rpx 0 26rpx 15rpx;
    width: calc(100% - 225.69rpx);
    font-size: 22rpx;
    letter-spacing: 2rpx;
    color: #999999;
    .promotionName {
      color: #333;
      font-size: 32rpx;
      font-weight: 800;
    }

    .active-time {
      color: #666;
      font-size: 24rpx;
      letter-spacing: normal;
      text {
        white-space: nowrap;
      }
    }

    .btn-status {
      position: absolute;
      right: 26rpx;
      bottom: 26rpx;

      width: 130rpx;
      height: 50rpx;
      border-radius: 28rpx;

      font-size: 26rpx;
      color: #ffffff;
      line-height: 50rpx;
      text-align: center;
    }

    .overdue {
      position: absolute;
      right: 26rpx;
      top: 70rpx;
      width: 134rpx;
      height: 80rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .defa {
      background: #2871fc;
    }

    .gray {
      background: #7eaafd !important;
    }

    .used {
      background: #c9c9c9;
    }
  }
}
</style>
